<template>
  <!-- TODO:撑高滚动条 -->
  <div class="scrollbar" :style="scrollBarStyle">
    <div ref="slider" @mousedown.stop="mousedown" :style="sliderStyle" class="slider"></div>
  </div>
</template>
<script>
  import BindEvent from '../utils/bind-event';

  export default {
    props: {
      paginationHeight: {
        type: Number,
        default: 0
      },
      maxHeight: {
        type: Number
      },
      titleHeight: {
        type: Number,
        default: 54
      },
      width: {
        type: Number,
        default: 500
      },
      calcLineHeight: {
        type: Number,
        default: 54
      },
      dataWidth: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        scrollLeft: 0
      };
    },
    computed: {
      scrollBarStyle() {
        return { bottom: this.paginationHeight + 'px' };
      },
      sliderWidth() {
        return Math.max(15, this.width * (this.width / this.dataWidth));
      },
      sliderStyle() {
        return {
          width: this.sliderWidth + 'px'
        };
      }
    },
    created() {
      this.p = 0;
    },
    mounted() {
      BindEvent.bind(window.document, 'mousemove', this.mousemove);
      BindEvent.bind(window.document, 'mouseup', this.mouseup);
      BindEvent.bind(window.top.document, 'mouseup', this.mouseup);
    },
    beforeDestroy() {
      BindEvent.unbind(window.document, 'mousemove', this.mousemove);
      BindEvent.unbind(window.document, 'mouseup', this.mouseup);
      BindEvent.unbind(window.top.document, 'mouseup', this.mouseup);
    },
    methods: {
      reset() {
        this.setScrollbarOffset(0);
        this.$emit('scroll', 0);
      },
      resetScroll() {
        let scrollLeft = (this.width - this.sliderWidth) * this.p;
        if (this.scrollLeft > scrollLeft) {
          this.scrollLeft = scrollLeft;
          this.sendScroll();
        }
      },
      setScrollbarOffset(scrollBarX) {
        // this.scrollTop = this.getScrollLeft(this.scrollLeft + x);
        this.p = scrollBarX / (this.dataWidth - this.width);
        this.scrollLeft = this.p * (this.width - this.sliderWidth);
        this.$refs.slider.style.left = this.scrollLeft + 'px';
      },
      mousedown(e) {
        this.startLeft = e.offsetX;
        this.moveStart = true;
        e.preventDefault();
      },
      mousemove(e) {
        if (this.moveStart) {
          this.scrollLeft = this.getScrollLeft(e.clientX - this.startLeft);
          this.sendScroll();
        }
      },
      mouseup() {
        this.moveStart = false;
      },
      sendScroll() {
        // 滑动百分比
        this.p = this.scrollLeft / (this.width - this.sliderWidth);
        this.$emit('scroll', (this.dataWidth - this.width) * this.p);
        this.$refs.slider.style.left = this.scrollLeft + 'px';
      },
      scrollToRight() {
        this.p = 1;
        this.scrollLeft = this.p * (this.width - this.sliderWidth);
        this.$refs.slider.style.left = this.scrollLeft + 'px';
        this.$emit('scroll', (this.dataWidth - this.width) * this.p);
      },
      getScrollLeft(left) {
        if (left < 0) left = 0;
        if (left + this.sliderWidth > this.width) {
          left = this.width - this.sliderWidth;
        }
        return left;
      }
    }
  };
</script>
<style scoped lang="scss">
  .scrollbar {
    z-index: 10;
    position: absolute;
    right: 0;
    left: 0;
    border-radius: 5px;
    height: 8px;
    .slider {
      position: absolute;
      border-radius: 5px;
      height: 100%;
      top: 0;
      left: 0;
      background-color: #aaa;
      height: 6px;
    }
  }
</style>
